<template>
  <div>
    <div style="text-align: right; font-size: 12px">
      <span @click="collapse" style="float: left;font-size:20px;  cursor: pointer;"><i :class="icon"></i></span>
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
          <!-- <el-breadcrumb-item v-for="item in getname" :key="item">{{ item }}</el-breadcrumb-item> -->
          <!-- <el-breadcrumb-item v-show="this.$route.meta.name!=null">{{ this.$route.meta.name }}</el-breadcrumb-item> -->
          <el-breadcrumb-item v-if="currentPathName!='首页'">{{ currentPathName }}</el-breadcrumb-item>
          <!-- <el-breadcrumb-item v-else>{{ currentPathName }}</el-breadcrumb-item> -->
        </el-breadcrumb>

      </div>
      <el-dropdown>
        <i class="el-icon-arrow-down" style="margin-right: 15px;font-size:20px;  cursor: pointer;"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <router-link to="/person" style="text-decoration: none;">修改信息</router-link>
          </el-dropdown-item>
          <el-dropdown-item><span @click="logout">确认退出</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <img v-if="user.avatarUrl!=null" :src="user.avatarUrl" alt="" style="width: 35px;height: 35px; border-radius: 50%;margin-right: 5px;position: relative;top: 10px;">
      <img v-else src="https://p.qqan.com/up/2020-6/2020060308522835058.jpg" alt="" style="width: 35px;height: 35px; border-radius: 50%;margin-right: 5px;position: relative;top: 10px;">
      <span style="font-size:16px;">{{ user.nickname }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: {
    icon: String,
    user: Object
  },
  data () {
    return {
      paths: [],
      getname: [],

    };
  },


  computed: {
    currentPathName () {
      return this.$store.state.currentPathName;//需要监听的数据
    },

  },
  watch: {
    currentPathName (newVal, oldVal) {
      console.log(newVal)
    },

  },
  created () {
    // this.getmenus()
  },
  methods: {
    // getmenus () {
    //   let menus = localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")) : ""
    //   this.getname = menus.map(r => r.name);

    //   console.log(this.getname);
    // },
    collapse () {
      this.$emit('doCollapse')

    },
    logout () {
      this.$confirm('您确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',  //确认按钮的文字显示
        type: 'warning',
        center: true, //文字居中显示
      }).then(() => {
        this.$store.commit("logout")
        this.$message.success("退出登录成功！")
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出登录'
        })
      })

    }
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  position: absolute;
  top: 23px;
  left: 50px;
}
</style>